<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>15款手机端打开菜单动画过渡特效DEMO2</title>
	
	<!--可无视-->
	<link rel="stylesheet" type="text/css" href="css/normalize.css" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/demo.css" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/css/demo.css">
	<link href="../../../../../fonts.useso.com/css-family=Source+Sans+Pro-200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic.css" tppabs="http://fonts.useso.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic" rel='stylesheet' type='text/css'>
	
	
	<!--必要样式-->
	<link href="css/main.css" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/css/main.css" rel="stylesheet" type="text/css"/>
	
	<style>
	.mobile-inner-nav a{
		-webkit-animation-duration: 0.5s;
		animation-duration: 0.5s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-name: returnToNormal;
		animation-name: returnToNormal;
	}
		
			
	@-webkit-keyframes returnToNormal {
	  from {
	    opacity: 0;
	    -webkit-transform: translate3d(0, 100%, 0);
	    transform: translate3d(0, 100%, 0);
	  }

	  to {
	    opacity: 1;
	    -webkit-transform: none;
	    transform: none;
	  }
	}

	@keyframes returnToNormal {
	  from {
	    opacity: 0;
	    -webkit-transform: translate3d(0, 100%, 0);
	    transform: translate3d(0, 100%, 0);
	  }

	  to {
	    opacity: 1;
	    -webkit-transform: none;
	    transform: none;
	  }
	}
	</style>
	<!--[if IE]>
		<script src="../../../../../libs.useso.com/js/html5shiv/3.7/html5shiv.min.js" tppabs="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		<div class="wrapper">
		  <div class="wrapper-inner">
		    <div class="wrapper-inner-buttons">
		      <a href="index.html" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/index.html">Example 1</a>
		      <a href="example2.html" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/example2.html" class="current">Example 2</a>
		      <a href="example3.html" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/example3.html">Example 3</a>
		      <a href="example4.html" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/example4.html">Example 4</a>
		      <a href="example5.html" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/example5.html">Example 5</a>
		      <a href="example6.html" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/example6.html">Example 6</a>
		      <a href="example7.html" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/example7.html">Example 7</a>
		      <a href="example8.html" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/example8.html">Example 8</a>
		      <a href="example9.html" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/example9.html">Example 9</a>
		      <a href="example10.html" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/example10.html">Example 10</a>
		      <a href="example11.html" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/example11.html">Example 11</a>
		      <a href="example12.html" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/example12.html">Example 12</a>
		      <a href="example13.html" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/example13.html">Example 13</a>
		      <a href="example14.html" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/example14.html">Example 14</a>
		      <a href="example15.html" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/example15.html">Example 15</a>
		    </div>

		      <div class="mobile">
		        <div class="mobile-inner">
		          <div class="mobile-inner-header">
		            <div class="mobile-inner-header-icon mobile-inner-header-icon-out"><span></span><span></span></div>
		          </div>
		          <div class="mobile-inner-nav">
		            <a href="#">Home</a>
		            <a href="#">Services</a>
		            <a href="#">Portfolio</a>
		            <a href="#">Blog</a>
		            <a href="#">About</a>
		            <a href="#">Contact</a>
		          </div>
		          <img src="_assets/photo1.jpg" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/_assets/photo1.jpg"/>
		          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum felis eget commodo vulputate. Etiam finibus ex sem, sed molestie sapien euismod et. Nunc dolor magna, iaculis ut ipsum a, finibus imperdiet enim. Aliquam eget mi facilisis, dapibus felis sed, efficitur leo. Fusce vestibulum augue a ex feugiat pretium. Morbi eu aliquet mi. Nunc nec mi at quam rhoncus tincidunt eget non lectus.</p> <p> Nullam elementum ornare posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vel eros nec massa faucibus commodo vel eget dui. Donec tincidunt orci id dui varius, dapibus tristique dolor mollis. Sed non faucibus quam, id ultrices lectus. Nunc lacinia dui sed justo suscipit, nec ornare ligula fermentum. Sed vitae tincidunt enim. Maecenas eget magna ex. In suscipit risus sem.</p>
		        </div>
		      </div>
		  </div>
		</div>
	</div>
	
	<script src="js/jquery-2.1.1.min.js" tppabs="https://www.17sucai.com/preview/381240/2016-03-29/%E4%B8%8B%E6%8B%89_%E6%94%B6%E8%B5%B7/js/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script>
	$(window).load(function () {
		  $(".mobile-inner-header-icon").click(function(){
		  	$(this).toggleClass("mobile-inner-header-icon-click mobile-inner-header-icon-out");
		  	$(".mobile-inner-nav").slideToggle(250);
		  });
		  $(".mobile-inner-nav a").each(function( index ) {
		  	$( this ).css({'animation-delay': (index/10)+'s'});
		  });
		});
	</script>

</body>
</html>